<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :offset="100"
    :immediate-check="false"
    class="_recommend">
    <div class="city" v-if="index === 2" @click="changeCity">{{cityName === '' ? '定位失败请选择城市' : cityName}}<van-icon name="location-o" color="#FF2A1F" size=".44rem"/></div>
    <div class="left" v-if="listDataL.length > 0">
      <div class="_recommend-item" v-for="(item, index) in listDataL" :key="index" @click="toSocietyDetail(item.id, item.video_id)">
        <van-image :src="item.type === 3 ? item.cover : item.social_image[0].image">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <div class="sign">
          <img :src="$img('video.png')" v-if="item.video_id">
          <span v-else>{{item.social_image.length}}图</span>
        </div>
        <p class="title">{{item.content}}</p>
        <div class="item_bottom">
          <img class="ataver" :src="item.author.avatar">
          <span>{{item.author.nickname}}</span>
          <p>{{item.create_time}}</p>
        </div>
      </div>
    </div>
    <div class="right" v-if="listDataR.length > 0">
      <div class="_recommend-item" v-for="(item, index) in listDataR" :key="index" @click="toSocietyDetail(item.id, item.video_id)">
        <van-image :src="item.type === 3 ? item.cover : item.social_image[0].image">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <div class="sign">
          <img :src="$img('video.png')" v-if="item.video_id">
          <span v-else>{{item.social_image.length}}图</span>
        </div>
        <p class="title">{{item.content}}</p>
        <div class="item_bottom">
          <img class="ataver" :src="item.author.avatar">
          <span>{{item.author.nickname}}</span>
          <p>{{item.create_time}}</p>
        </div>
      </div>
    </div>
  </van-list>
</template>

<script>
export default {
  props: ['index'],
  data () {
    return {
      listDataL: [],
      listDataR: [],
      loading: false,
      finished: false,
      page: 1,
      last_page: 100,
      show: false,
      cityName: ''
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      setTimeout(() => {
        if (this.page >= this.last_page) {
          this.finished = true
          return
        }
        this.page++
        this.loading = true
        this.$axios.get('/api/social/index', {
          params: {
            page: this.page,
            num: 10
          }
        }).then(res => {
          this.last_page = res.data.last_page
          for (let i in res.data.data) {
            i % 2 === 0 ? this.listDataL.push(res.data.data[i]) : this.listDataR.push(res.data.data[i])
          }
          this.loading = false
          this.finished = true
        })
      }, 1000)
    },
    getListData () {
      let obj = this.index === 0 ? {} : { type: 4, city_code: this.$store.state.cityCode }
      this.$axios.get('/api/social/index', {
        params: obj
      }).then(res => {
        if (res.status === 200) {
          for (let x in res.data.data) {
            x % 2 === 0 ? this.listDataL.push(res.data.data[x]) : this.listDataR.push(res.data.data[x])
          }
        }
      })
    },
    toSocietyDetail (id, video) {
      if (video) {
        this.$router.push(`/societyvideo/${id}`)
      } else {
        this.$router.push(`/SocietyArticle/${id}`)
      }
    },
    changeCity () {
      this.$router.push('/city')
    }
  },
  created () {
    this.finished = false
    this.loading = false
    this.page = 1
    this.cityName = this.$store.state.cityName === '' ? '佛山市' : this.$store.state.cityName
    this.getListData()
  }
}
</script>

<style lang="scss">
._recommend{
  // display: flex;
  padding: .32rem .16rem;
  // justify-content: space-around;
  position: relative;
  background: #f0f0f0;
  .left, .right{
    width: 3.52rem;
    display: inline-block;
  }
  .right{
    margin-left: .14rem;
  }
  .left{
    vertical-align: top;
  }
  ._recommend-item{
    width: 100%;
    padding-bottom: .24rem;
    margin-bottom: .24rem;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: .16rem;
    overflow: hidden;
    position: relative;
    .sign{
      top: 3.1rem;
      right: .1rem;
      position: absolute;
      width: .44rem;
      height: .36rem;
      background: #000000;
      border-radius: .08rem;
      font-size: .2rem;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: .44rem;
        height: .36rem;
        display: inline-block;
      }
    }
    .van-image{
      width: 3.52rem;
      height: 3.52rem;
      margin-bottom: .12rem;
      border-radius: .16rem;
      overflow: hidden;
      img{
        border-radius: .16rem;
      }
    }
    .title{
      max-height: .68rem;
      color: #000000;
      font-size: .24rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin-bottom: .2rem;
      padding: 0 .16rem;
    }
    .item_bottom{
      display: flex;
      align-items: center;
      color: #999999;
      font-size: .24rem;
      padding: 0 .16rem;
      .ataver{
        width: .36rem;
        height: .36rem;
        border-radius: .36rem;
        margin-right: .08rem;
      }
      span{
        margin-right: .5rem;
        width: .8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .city{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 .08rem 0;
    border-bottom: .02rem solid #e4e4e4;
    font-size: .22rem;
    color: #333333;
    background: #ffffff;
    margin-bottom: .16rem;
  }
}
</style>
